<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优居 - 高品质房产搜索平台</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入Three.js -->
  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            neutral: {
              100: '#F5F7FA',
              200: '#E5E6EB',
              300: '#C9CDD4',
              400: '#86909C',
              500: '#4E5969',
              600: '#272E3B',
              700: '#1D2129',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
      }
      .text-balance {
        text-wrap: balance;
      }
    }
  </style>
  
  <style>
    /* 全局样式 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      scroll-behavior: smooth;
    }
    
    /* 动画效果 */
    .fade-in {
      animation: fadeIn 0.5s ease-in-out;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 图片悬停效果 */
    .property-img {
      transition: transform 0.3s ease;
    }
    
    .property-card:hover .property-img {
      transform: scale(1.05);
    }
    
    /* 3D视图容器 */
    #model-container {
      width: 100%;
      height: 500px;
      position: relative;
      overflow: hidden;
    }
    
    /* 控制按钮样式 */
    .control-btn {
      @apply bg-white/80 backdrop-blur-sm hover:bg-white text-neutral-700 w-10 h-10 rounded-full flex items-center justify-center transition-all shadow-md hover:shadow-lg;
    }
    
    /* 热点标记 */
    .hotspot {
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: rgba(255, 125, 0, 0.9);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      animation: pulse 2s infinite;
      z-index: 10;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.2); opacity: 0.8; }
      100% { transform: scale(1); opacity: 1; }
    }
    
    /* 热点信息弹窗 */
    .hotspot-info {
      position: absolute;
      background-color: white;
      border-radius: 8px;
      padding: 12px 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      max-width: 250px;
      z-index: 20;
      display: none;
    }
    
    .hotspot-info.show {
      display: block;
      animation: fadeIn 0.3s ease-in-out;
    }
    
    .hotspot-info::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid white;
    }
    
    /* 房型切换器 */
    .room-switcher {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    
    .room-switcher button {
      @apply px-3 py-1.5 rounded-full text-sm transition-all;
      background-color: #F5F7FA;
      color: #4E5969;
    }
    
    .room-switcher button.active {
      background-color: #165DFF;
      color: white;
    }
    
    /* 滚动条美化 */
    ::-webkit-scrollbar {
      width: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #a1a1a1;
    }
  </style>
</head>

<body class="bg-neutral-100 text-neutral-700">
  <!-- 导航栏 -->
  <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
    <div class="container mx-auto px-4 py-3 md:py-4 flex items-center justify-between">
      <!-- 品牌标识 -->
      <div class="flex items-center">
        <div class="text-primary text-2xl font-bold mr-2">
          <i class="fa fa-home mr-1"></i>优居
        </div>
        <span class="hidden md:inline-block text-neutral-400 text-sm">发现您的理想家园</span>
      </div>
      
      <!-- 导航链接 - 桌面端 -->
      <nav class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-primary font-medium">首页</a>
        <a href="#" class="text-neutral-500 hover:text-primary transition-colors">房源</a>
        <a href="#" class="text-neutral-500 hover:text-primary transition-colors">区域指南</a>
        <a href="#" class="text-neutral-500 hover:text-primary transition-colors">经纪人</a>
        <a href="#" class="text-neutral-500 hover:text-primary transition-colors">关于我们</a>
      </nav>
      
      <!-- 用户操作 -->
      <div class="flex items-center space-x-4">
        <button class="hidden md:block text-neutral-500 hover:text-primary transition-colors">
          <i class="fa fa-heart-o text-lg"></i>
        </button>
        <button class="hidden md:block bg-primary text-white px-4 py-2 rounded-full hover:bg-primary/90 transition-colors">
          登录 / 注册
        </button>
        <!-- 移动端菜单按钮 -->
        <button class="md:hidden text-neutral-700" id="mobile-menu-button">
          <i class="fa fa-bars text-xl"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="md:hidden hidden bg-white border-t border-neutral-200" id="mobile-menu">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
        <a href="#" class="text-primary font-medium py-2">首页</a>
        <a href="#" class="text-neutral-500 py-2">房源</a>
        <a href="#" class="text-neutral-500 py-2">区域指南</a>
        <a href="#" class="text-neutral-500 py-2">经纪人</a>
        <a href="#" class="text-neutral-500 py-2">关于我们</a>
        <div class="flex space-x-4 pt-2 border-t border-neutral-200">
          <button class="flex-1 bg-white border border-primary text-primary px-4 py-2 rounded-full">登录</button>
          <button class="flex-1 bg-primary text-white px-4 py-2 rounded-full">注册</button>
        </div>
      </div>
    </div>
  </header>

  <!-- 搜索区域 -->
  <section class="bg-gradient-to-r from-primary to-primary/80 py-8 md:py-12">
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto">
        <h1 class="text-white text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-center mb-2">找到您理想的家</h1>
        <p class="text-white/80 text-center mb-8 text-balance">根据地区、价格和其他条件筛选数千套优质房源</p>
        
        <!-- 搜索表单 -->
        <div class="bg-white rounded-xl shadow-lg p-4 md:p-6 fade-in">
          <form id="search-form" class="space-y-4 md:space-y-0 md:grid md:grid-cols-3 gap-4">
            <!-- 地区选择 -->
            <div class="relative">
              <label class="block text-sm font-medium text-neutral-500 mb-1">地区</label>
              <div class="relative">
                <i class="fa fa-map-marker absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                <select id="location" class="w-full pl-10 pr-4 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all">
                  <option value="">所有地区</option>
                  <option value="朝阳区">朝阳区</option>
                  <option value="海淀区">海淀区</option>
                  <option value="丰台区">丰台区</option>
                  <option value="东城区">东城区</option>
                  <option value="西城区">西城区</option>
                  <option value="顺义区">顺义区</option>
                </select>
              </div>
            </div>
            
            <!-- 价格区间 -->
            <div class="relative">
              <label class="block text-sm font-medium text-neutral-500 mb-1">价格区间</label>
              <div class="relative">
                <i class="fa fa-rmb absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                <select id="price-range" class="w-full pl-10 pr-4 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all">
                  <option value="">不限价格</option>
                  <option value="0-100">100万以下</option>
                  <option value="100-300">100-300万</option>
                  <option value="300-500">300-500万</option>
                  <option value="500-800">500-800万</option>
                  <option value="800-1000">800-1000万</option>
                  <option value="1000+">1000万以上</option>
                </select>
              </div>
            </div>
            
            <!-- 房型 -->
            <div class="relative">
              <label class="block text-sm font-medium text-neutral-500 mb-1">房型</label>
              <div class="relative">
                <i class="fa fa-bed absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                <select id="room-type" class="w-full pl-10 pr-4 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all">
                  <option value="">不限房型</option>
                  <option value="1">一室</option>
                  <option value="2">两室</option>
                  <option value="3">三室</option>
                  <option value="4">四室</option>
                  <option value="5+">五室及以上</option>
                </select>
              </div>
            </div>
            
            <!-- 搜索按钮 -->
            <div class="md:col-span-3">
              <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-colors flex items-center justify-center">
                <i class="fa fa-search mr-2"></i> 搜索房源
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- 主要内容区域 -->
  <main class="container mx-auto px-4 py-8 md:py-12">
    <!-- 搜索结果统计 -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
      <div>
        <h2 class="text-[clamp(1.25rem,2vw,1.75rem)] font-bold text-neutral-700" id="result-count">找到 <span class="text-primary">246</span> 套房源</h2>
        <p class="text-neutral-400 text-sm mt-1" id="filter-info">所有地区，所有价格，所有房型</p>
      </div>
      
      <!-- 排序选项 -->
      <div class="mt-4 md:mt-0 flex items-center">
        <span class="text-neutral-500 mr-2">排序方式:</span>
        <select id="sort-options" class="border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none">
          <option value="recommended">推荐排序</option>
          <option value="price-asc">价格从低到高</option>
          <option value="price-desc">价格从高到低</option>
          <option value="newest">最新发布</option>
        </select>
      </div>
    </div>
    
    <!-- 房源列表 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="property-list">
      <!-- 房源卡片将通过JavaScript动态生成 -->
    </div>
    
    <!-- 加载更多按钮 -->
    <div class="mt-10 text-center">
      <button id="load-more" class="px-6 py-3 border border-primary text-primary rounded-full hover:bg-primary hover:text-white transition-colors">
        加载更多 <i class="fa fa-angle-down ml-1"></i>
      </button>
    </div>
  </main>

  <!-- 房源详情模态框 -->
  <div id="property-modal" class="fixed inset-0 bg-black/60 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl max-w-5xl w-full max-h-[90vh] overflow-y-auto fade-in">
      <div class="sticky top-0 bg-white z-10 flex justify-between items-center p-4 border-b border-neutral-200">
        <h3 class="text-xl font-bold text-neutral-700" id="modal-title"></h3>
        <button id="close-modal" class="text-neutral-500 hover:text-neutral-700">
          <i class="fa fa-times text-xl"></i>
        </button>
      </div>
      
      <div class="p-4 md:p-6" id="modal-content">
        <!-- 模态框内容将通过JavaScript动态生成 -->
      </div>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="bg-neutral-700 text-white py-10 mt-16">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h4 class="text-xl font-bold mb-4">优居</h4>
          <p class="text-neutral-300 mb-4">为您提供高品质的房产搜索体验，找到理想家园的最佳选择。</p>
          <div class="flex space-x-4">
            <a href="#" class="text-neutral-300 hover:text-white transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="text-neutral-300 hover:text-white transition-colors">
              <i class="fa fa-wechat"></i>
            </a>
            <a href="#" class="text-neutral-300 hover:text-white transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h5 class="font-bold mb-4">快速链接</h5>
          <ul class="space-y-2">
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">首页</a></li>
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">房源</a></li>
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">区域指南</a></li>
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">经纪人</a></li>
          </ul>
        </div>
        
        <div>
          <h5 class="font-bold mb-4">帮助中心</h5>
          <ul class="space-y-2">
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">常见问题</a></li>
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">联系我们</a></li>
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">隐私政策</a></li>
            <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">用户协议</a></li>
          </ul>
        </div>
        
        <div>
          <h5 class="font-bold mb-4">联系我们</h5>
          <ul class="space-y-2">
            <li class="flex items-start">
              <i class="fa fa-map-marker mt-1 mr-2 text-neutral-300"></i>
              <span class="text-neutral-300">北京市朝阳区建国路88号</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-phone mr-2 text-neutral-300"></i>
              <span class="text-neutral-300">400-888-9999</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-envelope mr-2 text-neutral-300"></i>
              <span class="text-neutral-300">contact@youju.com</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-neutral-600 mt-8 pt-6 text-center text-neutral-400 text-sm">
        <p>© 2023 优居房产搜索平台 版权所有</p>
      </div>
    </div>
  </footer>

  <script>
    // 模拟房产数据
    const properties = [
      {
        id: 1,
        title: "朝阳公园附近三居室",
        location: "朝阳区",
        price: 890,
        rooms: 3,
        area: 128,
        floor: 15,
        totalFloors: 28,
        year: 2015,
        description: "位于朝阳公园附近高档小区，南北通透，采光极佳。小区环境优美，安保严格，周边配套设施齐全，交通便利，距离地铁14号线仅800米。",
        features: ["精装修", "电梯房", "南北通透", "近地铁", "有车位"],
        images: [
          "https://picsum.photos/id/1067/800/600",
          "https://picsum.photos/id/164/800/600",
          "https://picsum.photos/id/174/800/600"
        ]
      },
      {
        id: 2,
        title: "海淀区中关村两居室",
        location: "海淀区",
        price: 650,
        rooms: 2,
        area: 92,
        floor: 8,
        totalFloors: 18,
        year: 2010,
        description: "位于中关村核心区域，紧邻各大高校和科技园区。房屋格局方正，采光良好，周边学术氛围浓厚，交通便利，生活设施完善。",
        features: ["简装修", "电梯房", "朝南", "近学校", "拎包入住"],
        images: [
          "https://picsum.photos/id/239/800/600",
          "https://picsum.photos/id/429/800/600",
          "https://picsum.photos/id/437/800/600"
        ]
      },
      {
        id: 3,
        title: "西城区金融街大四居",
        location: "西城区",
        price: 1580,
        rooms: 4,
        area: 186,
        floor: 12,
        totalFloors: 22,
        year: 2018,
        description: "金融街高档住宅，豪华装修，南北通透，视野开阔。小区配有24小时安保和管家服务，周边有多家银行、商场和餐饮场所，生活便利。",
        features: ["豪华装修", "电梯房", "南北通透", "安保严格", "中央空调"],
        images: [
          "https://picsum.photos/id/488/800/600",
          "https://picsum.photos/id/493/800/600",
          "https://picsum.photos/id/537/800/600"
        ]
      },
      {
        id: 4,
        title: "东城区王府井一居室",
        location: "东城区",
        price: 420,
        rooms: 1,
        area: 58,
        floor: 6,
        totalFloors: 12,
        year: 2005,
        description: "位于王府井商圈，交通便利，生活设施齐全。房屋虽小但格局合理，适合单身人士或小夫妻居住，步行可达多个景点和购物中心。",
        features: ["精装修", "步行梯", "朝南", "市中心", "商业发达"],
        images: [
          "https://picsum.photos/id/540/800/600",
          "https://picsum.photos/id/549/800/600",
          "https://picsum.photos/id/554/800/600"
        ]
      },
      {
        id: 5,
        title: "丰台区马家堡三居室",
        location: "丰台区",
        price: 380,
        rooms: 3,
        area: 110,
        floor: 5,
        totalFloors: 15,
        year: 2008,
        description: "丰台区性价比高的三居室，南北通透，采光良好。小区环境安静，适合家庭居住，距离地铁4号线约1公里，周边有超市、医院等设施。",
        features: ["中等装修", "电梯房", "南北通透", "性价比高", "近医院"],
        images: [
          "https://picsum.photos/id/564/800/600",
          "https://picsum.photos/id/574/800/600",
          "https://picsum.photos/id/580/800/600"
        ]
      },
      {
        id: 6,
        title: "顺义区中央别墅区五居室",
        location: "顺义区",
        price: 2800,
        rooms: 5,
        area: 320,
        floor: 2,
        totalFloors: 3,
        year: 2012,
        description: "位于中央别墅区核心位置，独栋别墅，带私家花园和车库。小区环境优美，安保严格，适合追求高品质生活的家庭，周边有国际学校。",
        features: ["豪华装修", "独栋别墅", "花园", "车库", "国际学校"],
        images: [
          "https://picsum.photos/id/590/800/600",
          "https://picsum.photos/id/602/800/600",
          "https://picsum.photos/id/614/800/600"
        ]
      }
    ];

    // 复制数据以增加更多房源
    const extendedProperties = [...properties];
    for (let i = 0; i < 3; i++) {
      properties.forEach(prop => {
        extendedProperties.push({
          ...prop,
          id: prop.id + (i + 1) * 10,
          price: Math.round(prop.price * (0.8 + Math.random() * 0.4))
        });
      });
    }

    // 当前显示的房源
    let currentProperties = [...extendedProperties];
    // 当前加载的数量
    let loadedCount = 6;

    // DOM元素
    const propertyList = document.getElementById('property-list');
    const searchForm = document.getElementById('search-form');
    const resultCount = document.getElementById('result-count');
    const filterInfo = document.getElementById('filter-info');
    const loadMoreBtn = document.getElementById('load-more');
    const propertyModal = document.getElementById('property-modal');
    const modalContent = document.getElementById('modal-content');
    const modalTitle = document.getElementById('modal-title');
    const closeModal = document.getElementById('close-modal');
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    const sortOptions = document.getElementById('sort-options');

    // 初始化页面
    document.addEventListener('DOMContentLoaded', () => {
      renderProperties(extendedProperties.slice(0, loadedCount));
      updateResultCount();
      
      // 事件监听
      searchForm.addEventListener('submit', handleSearch);
      loadMoreBtn.addEventListener('click', loadMoreProperties);
      closeModal.addEventListener('click', () => {
        propertyModal.classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
      });
      mobileMenuButton.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
      });
      sortOptions.addEventListener('change', handleSort);
      
      // 点击模态框外部关闭
      propertyModal.addEventListener('click', (e) => {
        if (e.target === propertyModal) {
          propertyModal.classList.add('hidden');
          document.body.classList.remove('overflow-hidden');
        }
      });
      
      // 滚动时改变导航栏样式
      window.addEventListener('scroll', () => {
        const header = document.querySelector('header');
        if (window.scrollY > 50) {
          header.classList.add('py-2', 'shadow');
          header.classList.remove('py-3', 'md:py-4', 'shadow-sm');
        } else {
          header.classList.add('py-3', 'md:py-4', 'shadow-sm');
          header.classList.remove('py-2', 'shadow');
        }
      });
    });

    // 渲染房源列表
    function renderProperties(props) {
      propertyList.innerHTML = '';
      
      props.forEach(prop => {
        const propertyCard = document.createElement('div');
        propertyCard.className = 'bg-white rounded-xl overflow-hidden card-shadow hover:shadow-lg transition-shadow property-card';
        propertyCard.innerHTML = `
          <div class="relative overflow-hidden h-48">
            <img src="${prop.images[0]}" alt="${prop.title}" class="w-full h-full object-cover property-img">
            <div class="absolute top-3 left-3 bg-primary text-white text-sm font-medium px-2 py-1 rounded">
              ${prop.location}
            </div>
            <button class="absolute top-3 right-3 bg-white/80 hover:bg-white text-neutral-500 hover:text-secondary w-8 h-8 rounded-full flex items-center justify-center transition-colors">
              <i class="fa fa-heart-o"></i>
            </button>
          </div>
          <div class="p-4">
            <h3 class="font-bold text-lg mb-2 text-neutral-700 hover:text-primary transition-colors cursor-pointer property-title">${prop.title}</h3>
            <div class="flex flex-wrap gap-y-2 mb-3">
              <div class="flex items-center text-neutral-500 text-sm mr-4">
                <i class="fa fa-bed mr-1 text-neutral-400"></i> ${prop.rooms}室
              </div>
              <div class="flex items-center text-neutral-500 text-sm mr-4">
                <i class="fa fa-arrows-alt mr-1 text-neutral-400"></i> ${prop.area}㎡
              </div>
              <div class="flex items-center text-neutral-500 text-sm">
                <i class="fa fa-building-o mr-1 text-neutral-400"></i> ${prop.floor}/${prop.totalFloors}层
              </div>
            </div>
            <div class="flex items-end justify-between">
              <div>
                <span class="text-secondary font-bold text-xl">${prop.price}</span>
                <span class="text-neutral-500 text-sm">万</span>
              </div>
              <button class="text-primary hover:text-primary/80 font-medium text-sm flex items-center view-details" data-id="${prop.id}">
                查看详情 <i class="fa fa-angle-right ml-1"></i>
              </button>
            </div>
          </div>
        `;
        
        propertyList.appendChild(propertyCard);
        
        // 添加查看详情事件
        propertyCard.querySelector('.view-details').addEventListener('click', () => {
          showPropertyDetails(prop.id);
        });
        
        // 点击标题也可以查看详情
        propertyCard.querySelector('.property-title').addEventListener('click', () => {
          showPropertyDetails(prop.id);
        });
      });
    }

    // 显示房源详情
    function showPropertyDetails(id) {
      const property = extendedProperties.find(p => p.id === id);
      if (!property) return;
      
      modalTitle.textContent = property.title;
      
      // 生成图片轮播
      let imagesHtml = `
        <div class="relative mb-6 rounded-lg overflow-hidden">
          <div class="flex overflow-x-auto snap-x snap-mandatory scrollbar-hide" id="image-carousel">
      `;
      
      property.images.forEach((img, index) => {
        imagesHtml += `
          <div class="min-w-full snap-center">
            <img src="${img}" alt="${property.title} 图片 ${index + 1}" class="w-full h-[300px] md:h-[400px] object-cover">
          </div>
        `;
      });
      
      imagesHtml += `
          </div>
          <div class="absolute bottom-3 left-0 right-0 flex justify-center gap-2">
      `;
      
      property.images.forEach((_, index) => {
        imagesHtml += `
          <button class="w-2.5 h-2.5 rounded-full bg-white/60 carousel-dot ${index === 0 ? 'bg-white' : ''}" data-index="${index}"></button>
        `;
      });
      
      imagesHtml += `
          </div>
        </div>
      `;
      
      // 生成特征标签
      let featuresHtml = '';
      property.features.forEach(feature => {
        featuresHtml += `
          <span class="inline-block bg-neutral-100 text-neutral-600 text-sm px-3 py-1 rounded-full mr-2 mb-2">${feature}</span>
        `;
      });
      
      // 填充模态框内容
      modalContent.innerHTML = `
        ${imagesHtml}
        
        <div class="mb-6">
          <div class="text-3xl font-bold text-secondary mb-4">${property.price} 万</div>
          <div class="flex flex-wrap gap-4 text-neutral-600">
            <div><i class="fa fa-map-marker text-primary mr-1"></i> ${property.location}</div>
            <div><i class="fa fa-arrows-alt text-primary mr-1"></i> 建筑面积: ${property.area}㎡</div>
            <div><i class="fa fa-calendar text-primary mr-1"></i> 建成年代: ${property.year}年</div>
          </div>
        </div>
        
        <div class="mb-6">
          <h4 class="text-lg font-bold mb-3 text-neutral-700">房源特色</h4>
          <div class="flex flex-wrap">
            ${featuresHtml}
          </div>
        </div>
        
        <div class="mb-6">
          <h4 class="text-lg font-bold mb-3 text-neutral-700">房源描述</h4>
          <p class="text-neutral-600 leading-relaxed">${property.description}</p>
        </div>
        
        <div class="mb-6">
          <h4 class="text-lg font-bold mb-3 text-neutral-700">基本信息</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex justify-between py-2 border-b border-neutral-200">
              <span class="text-neutral-500">房型</span>
              <span class="font-medium">${property.rooms}室</span>
            </div>
            <div class="flex justify-between py-2 border-b border-neutral-200">
              <span class="text-neutral-500">楼层</span>
              <span class="font-medium">${property.floor}/${property.totalFloors}层</span>
            </div>
            <div class="flex justify-between py-2 border-b border-neutral-200">
              <span class="text-neutral-500">朝向</span>
              <span class="font-medium">南北通透</span>
            </div>
            <div class="flex justify-between py-2 border-b border-neutral-200">
              <span class="text-neutral-500">装修</span>
              <span class="font-medium">精装修</span>
            </div>
          </div>
        </div>
        
        <div class="mb-6">
          <button id="vr-view-button" class="w-full bg-secondary text-white py-3 rounded-lg hover:bg-secondary/90 transition-colors flex items-center justify-center">
            <i class="fa fa-vr-cardboard mr-2"></i> VR看房体验
          </button>
        </div>
        
        <!-- VR看房区域 -->
        <div id="vr-container" class="hidden mb-6">
          <h4 class="text-lg font-bold mb-3 text-neutral-700">3D实景看房</h4>
          
          <!-- 房型切换器 -->
          <div class="room-switcher mb-4">
            <button class="active" data-room="livingroom">客厅</button>
            <button data-room="masterbedroom">主卧</button>
            <button data-room="secondbedroom">次卧</button>
            <button data-room="kitchen">厨房</button>
            <button data-room="bathroom">卫生间</button>
          </div>
          
          <!-- 3D模型容器 -->
          <div id="model-container" class="rounded-lg overflow-hidden">
            <!-- Three.js 渲染器将在这里 -->
          </div>
          
          <!-- 控制按钮 -->
          <div class="flex gap-4 mt-4 justify-center">
            <button id="rotate-button" class="control-btn" title="自动旋转">
              <i class="fa fa-repeat"></i>
            </button>
            <button id="reset-button" class="control-btn" title="重置视图">
              <i class="fa fa-refresh"></i>
            </button>
            <button id="fullscreen-button" class="control-btn" title="全屏查看">
              <i class="fa fa-expand"></i>
            </button>
          </div>
        </div>
        
        <div class="sticky bottom-0 bg-white p-4 -mx-6 -mb-6 border-t border-neutral-200 flex flex-col sm:flex-row gap-3">
          <button class="flex-1 bg-white border border-primary text-primary py-3 rounded-lg hover:bg-primary/5 transition-colors">
            <i class="fa fa-phone mr-2"></i> 电话咨询
          </button>
          <button class="flex-1 bg-primary text-white py-3 rounded-lg hover:bg-primary/90 transition-colors">
            <i class="fa fa-calendar-check-o mr-2"></i> 预约看房
          </button>
        </div>
      `;
      
      // 显示模态框
      propertyModal.classList.remove('hidden');
      document.body.classList.add('overflow-hidden');
      
      // 重置VR容器状态
      const vrContainer = document.getElementById('vr-container');
      const vrButton = document.getElementById('vr-view-button');
      vrContainer.classList.add('hidden');
      
      // 添加VR看房按钮事件
      vrButton.removeEventListener('click', toggleVRView);
      vrButton.addEventListener('click', toggleVRView);
      
      // 图片轮播功能
      const carousel = document.getElementById('image-carousel');
      const dots = document.querySelectorAll('.carousel-dot');
      
      dots.forEach(dot => {
        dot.addEventListener('click', () => {
          const index = parseInt(dot.dataset.index);
          carousel.scrollTo({
            left: index * carousel.offsetWidth,
            behavior: 'smooth'
          });
          
          // 更新激活的点
          dots.forEach(d => d.classList.remove('bg-white'));
          dots.forEach(d => d.classList.add('bg-white/60'));
          dot.classList.remove('bg-white/60');
          dot.classList.add('bg-white');
        });
      });
      
      // 滚动时更新激活的点
      carousel.addEventListener('scroll', () => {
        const index = Math.round(carousel.scrollLeft / carousel.offsetWidth);
        dots.forEach(d => d.classList.remove('bg-white'));
        dots.forEach(d => d.classList.add('bg-white/60'));
        dots[index].classList.remove('bg-white/60');
        dots[index].classList.add('bg-white');
      });
    }

    // 处理搜索
    function handleSearch(e) {
      e.preventDefault();
      
      const location = document.getElementById('location').value;
      const priceRange = document.getElementById('price-range').value;
      const roomType = document.getElementById('room-type').value;
      
      // 过滤房源
      currentProperties = extendedProperties.filter(prop => {
        // 地区过滤
        if (location && prop.location !== location) return false;
        
        // 价格过滤
        if (priceRange) {
          const [min, max] = priceRange.split('-');
          if (max === '+') {
            if (prop.price < parseInt(min)) return false;
          } else if (!max) {
            // 这种情况不会发生，因为我们的选项中没有这种格式
          } else {
            if (prop.price < parseInt(min) || prop.price > parseInt(max)) return false;
          }
        }
        
        // 房型过滤
        if (roomType) {
          if (roomType === '5+') {
            if (prop.rooms < 5) return false;
          } else {
            if (prop.rooms !== parseInt(roomType)) return false;
          }
        }
        
        return true;
      });
      
      // 重置加载数量
      loadedCount = 6;
      
      // 重新渲染
      renderProperties(currentProperties.slice(0, loadedCount));
      updateResultCount();
      
      // 更新过滤信息显示
      updateFilterInfo(location, priceRange, roomType);
      
      // 滚动到房源列表顶部
      propertyList.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    // 处理排序
    function handleSort() {
      const sortBy = sortOptions.value;
      
      switch (sortBy) {
        case 'price-asc':
          currentProperties.sort((a, b) => a.price - b.price);
          break;
        case 'price-desc':
          currentProperties.sort((a, b) => b.price - a.price);
          break;
        case 'newest':
          currentProperties.sort((a, b) => b.year - a.year);
          break;
        default:
          // 推荐排序（默认按ID）
          currentProperties.sort((a, b) => a.id - b.id);
      }
      
      renderProperties(currentProperties.slice(0, loadedCount));
    }

    // 加载更多房源
    function loadMoreProperties() {
      loadedCount += 6;
      renderProperties(currentProperties.slice(0, loadedCount));
      
      // 如果已经加载完所有房源，隐藏加载更多按钮
      if (loadedCount >= currentProperties.length) {
        loadMoreBtn.classList.add('hidden');
      }
    }

    // 更新结果数量显示
    function updateResultCount() {
      const countElement = resultCount.querySelector('span');
      countElement.textContent = currentProperties.length;
    }

    // 更新过滤信息显示
    function updateFilterInfo(location, priceRange, roomType) {
      let locationText = location || '所有地区';
      
      let priceText = '所有价格';
      if (priceRange) {
        const [min, max] = priceRange.split('-');
        if (max === '+') {
          priceText = `${min}万以上`;
        } else {
          priceText = `${min}-${max}万`;
        }
      }
      
      let roomText = '所有房型';
      if (roomType) {
        if (roomType === '5+') {
          roomText = '五室及以上';
        } else {
          roomText = `${roomType}室`;
        }
      }
      
      filterInfo.textContent = `${locationText}，${priceText}，${roomText}`;
    }
    
    // VR看房功能实现
    
    // 全局变量
    let scene, camera, renderer, controls;
    let isAutoRotating = false;
    let currentModel = null;
    let hotspotInfo = null;
    
    // DOM元素
    let modelContainer, rotateButton, resetButton, fullscreenButton, roomButtons;
    
    // 切换VR视图显示
    function toggleVRView() {
      const vrContainer = document.getElementById('vr-container');
      
      if (vrContainer.classList.contains('hidden')) {
        vrContainer.classList.remove('hidden');
        
        // 初始化DOM元素引用
        modelContainer = document.getElementById('model-container');
        rotateButton = document.getElementById('rotate-button');
        resetButton = document.getElementById('reset-button');
        fullscreenButton = document.getElementById('fullscreen-button');
        roomButtons = document.querySelectorAll('.room-switcher button');
        
        // 初始化3D场景
        init();
        
        // 添加事件监听
        rotateButton.addEventListener('click', toggleAutoRotate);
        resetButton.addEventListener('click', resetView);
        fullscreenButton.addEventListener('click', toggleFullscreen);
        
        // 房间切换按钮事件
        roomButtons.forEach(button => {
          button.addEventListener('click', () => {
            const roomId = button.getAttribute('data-room');
            switchToRoom(roomId);
          });
        });
        
        // 全屏变化事件
        document.addEventListener('fullscreenchange', () => {
          if (document.fullscreenElement) {
            fullscreenButton.innerHTML = '<i class="fa fa-compress"></i>';
            fullscreenButton.title = '退出全屏';
          } else {
            fullscreenButton.innerHTML = '<i class="fa fa-expand"></i>';
            fullscreenButton.title = '全屏查看';
          }
        });
      } else {
        vrContainer.classList.add('hidden');
        // 清理3D场景
        if (renderer) {
          renderer.dispose();
          modelContainer.innerHTML = '';
        }
      }
    }
    
    // 初始化3D场景
    function init() {
      // 创建场景
      scene = new THREE.Scene();
      scene.background = new THREE.Color(0xf0f0f0);
      
      // 创建相机
      camera = new THREE.PerspectiveCamera(75, modelContainer.clientWidth / modelContainer.clientHeight, 0.1, 1000);
      camera.position.set(0, 2, 5);
      
      // 创建渲染器
      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(modelContainer.clientWidth, modelContainer.clientHeight);
      renderer.shadowMap.enabled = true;
      modelContainer.appendChild(renderer.domElement);
      
      // 创建控制器
      controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.1;
      controls.maxPolarAngle = Math.PI / 2;
      controls.minDistance = 1;
      controls.maxDistance = 10;
      
      // 添加光源
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
      scene.add(ambientLight);
      
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight.position.set(5, 10, 7.5);
      directionalLight.castShadow = true;
      directionalLight.shadow.mapSize.width = 1024;
      directionalLight.shadow.mapSize.height = 1024;
      scene.add(directionalLight);
      
      // 创建房屋模型（简化版）
      createHouseModel();
      
      // 创建热点标记
      createHotspots();
      
      // 窗口大小变化时调整
      window.addEventListener('resize', onWindowResize);
      
      // 开始动画循环
      animate();
    }
    
    // 创建房屋模型
    function createHouseModel() {
      // 地板
      const floorGeometry = new THREE.PlaneGeometry(10, 10);
      const floorMaterial = new THREE.MeshStandardMaterial({ 
        color: 0xeeeeee, 
        roughness: 0.7, 
        metalness: 0.1
      });
      const floor = new THREE.Mesh(floorGeometry, floorMaterial);
      floor.rotation.x = -Math.PI / 2;
      floor.receiveShadow = true;
      scene.add(floor);
      
      // 墙壁材质
      const wallMaterial = new THREE.MeshStandardMaterial({ 
        color: 0xffffff, 
        roughness: 0.5
      });
      
      // 前墙
      const frontWallGeometry = new THREE.BoxGeometry(10, 4, 0.1);
      const frontWall = new THREE.Mesh(frontWallGeometry, wallMaterial);
      frontWall.position.set(0, 2, -5);
      scene.add(frontWall);
      
      // 后墙
      const backWallGeometry = new THREE.BoxGeometry(10, 4, 0.1);
      const backWall = new THREE.Mesh(backWallGeometry, wallMaterial);
      backWall.position.set(0, 2, 5);
      scene.add(backWall);
      
      // 左墙
      const leftWallGeometry = new THREE.BoxGeometry(10, 4, 0.1);
      const leftWall = new THREE.Mesh(leftWallGeometry, wallMaterial);
      leftWall.position.set(-5, 2, 0);
      leftWall.rotation.y = Math.PI / 2;
      scene.add(leftWall);
      
      // 右墙
      const rightWallGeometry = new THREE.BoxGeometry(10, 4, 0.1);
      const rightWall = new THREE.Mesh(rightWallGeometry, wallMaterial);
      rightWall.position.set(5, 2, 0);
      rightWall.rotation.y = Math.PI / 2;
      scene.add(rightWall);
      
      // 添加门
      const doorGeometry = new THREE.BoxGeometry(1.8, 2.1, 0.05);
      const doorMaterial = new THREE.MeshStandardMaterial({ 
        color: 0x8B4513, 
        roughness: 0.7
      });
      const door = new THREE.Mesh(doorGeometry, doorMaterial);
      door.position.set(0, 1.05, 5.02);
      scene.add(door);
      
      // 添加窗户
      const windowGeometry = new THREE.BoxGeometry(2, 1.5, 0.05);
      const windowMaterial = new THREE.MeshStandardMaterial({ 
        color: 0x87CEEB, 
        transparent: true, 
        opacity: 0.7, 
        roughness: 0.3
      });
      
      // 前墙窗户
      const frontWindow = new THREE.Mesh(windowGeometry, windowMaterial);
      frontWindow.position.set(0, 2, -5.02);
      scene.add(frontWindow);
      
      // 左墙窗户
      const leftWindow = new THREE.Mesh(windowGeometry, windowMaterial);
      leftWindow.position.set(-5.02, 2, 0);
      leftWindow.rotation.y = Math.PI / 2;
      scene.add(leftWindow);
      
      // 右墙窗户
      const rightWindow = new THREE.Mesh(windowGeometry, windowMaterial);
      rightWindow.position.set(5.02, 2, 0);
      rightWindow.rotation.y = Math.PI / 2;
      scene.add(rightWindow);
      
      // 添加一些家具（简化版）
      addFurniture();
    }
    
    // 添加家具
    function addFurniture() {
      // 沙发
      const sofaGeometry = new THREE.BoxGeometry(2.5, 0.8, 1.2);
      const sofaMaterial = new THREE.MeshStandardMaterial({ color: 0x3498db, roughness: 0.8 });
      const sofa = new THREE.Mesh(sofaGeometry, sofaMaterial);
      sofa.position.set(-1, 0.4, -2);
      scene.add(sofa);
      
      // 茶几
      const tableGeometry = new THREE.BoxGeometry(1, 0.4, 1);
      const tableMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.7 });
      const table = new THREE.Mesh(tableGeometry, tableMaterial);
      table.position.set(0, 0.2, 0);
      scene.add(table);
      
      // 椅子
      const chairGeometry = new THREE.BoxGeometry(0.8, 0.8, 0.8);
      const chairMaterial = new THREE.MeshStandardMaterial({ color: 0xe74c3c, roughness: 0.8 });
      const chair = new THREE.Mesh(chairGeometry, chairMaterial);
      chair.position.set(1.5, 0.4, 1);
      scene.add(chair);
      
      // 床
      const bedGeometry = new THREE.BoxGeometry(2, 0.6, 1.8);
      const bedMaterial = new THREE.MeshStandardMaterial({ color: 0xf39c12, roughness: 0.8 });
      const bed = new THREE.Mesh(bedGeometry, bedMaterial);
      bed.position.set(-3, 0.3, 2);
      scene.add(bed);
      
      // 衣柜
      const wardrobeGeometry = new THREE.BoxGeometry(1.5, 2, 0.6);
      const wardrobeMaterial = new THREE.MeshStandardMaterial({ color: 0x95a5a6, roughness: 0.7 });
      const wardrobe = new THREE.Mesh(wardrobeGeometry, wardrobeMaterial);
      wardrobe.position.set(-4, 1, 3);
      scene.add(wardrobe);
      
      // 餐桌
      const diningTableGeometry = new THREE.BoxGeometry(1.2, 0.7, 1.2);
      const diningTableMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.7 });
      const diningTable = new THREE.Mesh(diningTableGeometry, diningTableMaterial);
      diningTable.position.set(3, 0.35, -2);
      scene.add(diningTable);
      
      // 厨房橱柜
      const kitchenCabinetGeometry = new THREE.BoxGeometry(3, 1.2, 0.6);
      const kitchenCabinetMaterial = new THREE.MeshStandardMaterial({ color: 0xECF0F1, roughness: 0.6 });
      const kitchenCabinet = new THREE.Mesh(kitchenCabinetGeometry, kitchenCabinetMaterial);
      kitchenCabinet.position.set(3, 0.6, 3);
      scene.add(kitchenCabinet);
      
      // 分隔线（指示不同房间区域）
      addRoomDivisions();
    }
    
    // 添加房间分隔线
    function addRoomDivisions() {
      // 创建线条材质
      const lineMaterial = new THREE.LineBasicMaterial({ color: 0xBDC3C7, linewidth: 2 });
      
      // 客厅与主卧分隔线
      const livingRoomMasterBedroomPoints = [
        new THREE.Vector3(-2, 0.01, 0),
        new THREE.Vector3(-2, 0.01, 5)
      ];
      const livingRoomMasterBedroomGeometry = new THREE.BufferGeometry().setFromPoints(livingRoomMasterBedroomPoints);
      const livingRoomMasterBedroomLine = new THREE.Line(livingRoomMasterBedroomGeometry, lineMaterial);
      scene.add(livingRoomMasterBedroomLine);
      
      // 主卧与次卧分隔线
      const masterBedroomSecondBedroomPoints = [
        new THREE.Vector3(-4, 0.01, 0),
        new THREE.Vector3(-4, 0.01, 5)
      ];
      const masterBedroomSecondBedroomGeometry = new THREE.BufferGeometry().setFromPoints(masterBedroomSecondBedroomPoints);
      const masterBedroomSecondBedroomLine = new THREE.Line(masterBedroomSecondBedroomGeometry, lineMaterial);
      scene.add(masterBedroomSecondBedroomLine);
      
      // 厨房与卫生间分隔线
      const kitchenBathroomPoints = [
        new THREE.Vector3(1, 0.01, 0),
        new THREE.Vector3(1, 0.01, 5)
      ];
      const kitchenBathroomGeometry = new THREE.BufferGeometry().setFromPoints(kitchenBathroomPoints);
      const kitchenBathroomLine = new THREE.Line(kitchenBathroomGeometry, lineMaterial);
      scene.add(kitchenBathroomLine);
      
      // 餐厅与客厅分隔线
      const diningRoomLivingRoomPoints = [
        new THREE.Vector3(1, 0.01, -5),
        new THREE.Vector3(1, 0.01, 0)
      ];
      const diningRoomLivingRoomGeometry = new THREE.BufferGeometry().setFromPoints(diningRoomLivingRoomPoints);
      const diningRoomLivingRoomLine = new THREE.Line(diningRoomLivingRoomGeometry, lineMaterial);
      scene.add(diningRoomLivingRoomLine);
    }
    
    // 创建热点标记
    function createHotspots() {
      // 热点数据
      const hotspots = [
        { id: 'livingroom', position: { x: 0, y: 2, z: -2 }, title: '客厅', description: '宽敞明亮的客厅，朝南采光好' },
        { id: 'masterbedroom', position: { x: -3, y: 2, z: 2 }, title: '主卧', description: '舒适的主卧，带大衣柜' },
        { id: 'secondbedroom', position: { x: -4, y: 2, z: -2 }, title: '次卧', description: '温馨的次卧，适合儿童或客房' },
        { id: 'kitchen', position: { x: 3, y: 2, z: 2 }, title: '厨房', description: '现代化厨房，设施齐全' },
        { id: 'bathroom', position: { x: 2, y: 2, z: -1 }, title: '卫生间', description: '干净整洁的卫生间，带淋浴' }
      ];
      
      // 创建热点标记
      hotspots.forEach(hotspot => {
        const hotspotElement = document.createElement('div');
        hotspotElement.className = 'hotspot';
        hotspotElement.setAttribute('data-id', hotspot.id);
        hotspotElement.setAttribute('data-title', hotspot.title);
        hotspotElement.setAttribute('data-description', hotspot.description);
        hotspotElement.innerHTML = '<i class="fa fa-plus"></i>';
        
        // 将热点添加到容器
        modelContainer.appendChild(hotspotElement);
        
        // 添加点击事件
        hotspotElement.addEventListener('click', () => {
          showHotspotInfo(hotspotElement, hotspot.title, hotspot.description);
        });
      });
      
      // 创建热点信息弹窗
      hotspotInfo = document.createElement('div');
      hotspotInfo.className = 'hotspot-info';
      modelContainer.appendChild(hotspotInfo);
      
      // 点击其他区域关闭弹窗
      modelContainer.addEventListener('click', (e) => {
        if (!e.target.classList.contains('hotspot')) {
          hotspotInfo.classList.remove('show');
        }
      });
    }
    
    // 显示热点信息
    function showHotspotInfo(hotspotElement, title, description) {
      const rect = hotspotElement.getBoundingClientRect();
      const containerRect = modelContainer.getBoundingClientRect();
      
      // 设置弹窗内容
      hotspotInfo.innerHTML = `
        <h4 class="font-bold text-neutral-700 mb-1">${title}</h4>
        <p class="text-sm text-neutral-600">${description}</p>
      `;
      
      // 设置弹窗位置
      hotspotInfo.style.left = `${rect.left - containerRect.left + rect.width / 2}px`;
      hotspotInfo.style.top = `${rect.top - containerRect.top - 10}px`;
      hotspotInfo.style.transform = 'translateX(-50%) translateY(-100%)';
      
      // 显示弹窗
      hotspotInfo.classList.add('show');
    }
    
    // 窗口大小变化处理
    function onWindowResize() {
      camera.aspect = modelContainer.clientWidth / modelContainer.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(modelContainer.clientWidth, modelContainer.clientHeight);
      
      // 更新热点位置
      updateHotspotPositions();
    }
    
    // 更新热点位置
    function updateHotspotPositions() {
      const hotspots = document.querySelectorAll('.hotspot');
      hotspots.forEach(hotspot => {
        const id = hotspot.getAttribute('data-id');
        
        // 根据ID获取3D坐标
        let position;
        switch (id) {
          case 'livingroom':
            position = new THREE.Vector3(0, 2, -2);
            break;
          case 'masterbedroom':
            position = new THREE.Vector3(-3, 2, 2);
            break;
          case 'secondbedroom':
            position = new THREE.Vector3(-4, 2, -2);
            break;
          case 'kitchen':
            position = new THREE.Vector3(3, 2, 2);
            break;
          case 'bathroom':
            position = new THREE.Vector3(2, 2, -1);
            break;
          default:
            position = new THREE.Vector3(0, 2, 0);
        }
        
        // 将3D坐标转换为屏幕坐标
        const screenPosition = position.clone().project(camera);
        
        // 计算DOM位置
        const x = (screenPosition.x * 0.5 + 0.5) * modelContainer.clientWidth;
        const y = (-screenPosition.y * 0.5 + 0.5) * modelContainer.clientHeight;
        
        // 设置热点位置
        hotspot.style.left = `${x}px`;
        hotspot.style.top = `${y}px`;
      });
    }
    
    // 动画循环
    function animate() {
      requestAnimationFrame(animate);
      
      // 更新控制器
      controls.update();
      
      // 自动旋转
      if (isAutoRotating) {
        scene.rotation.y += 0.005;
      }
      
      // 更新热点位置
      updateHotspotPositions();
      
      // 渲染场景
      renderer.render(scene, camera);
    }
    
    // 切换自动旋转
    function toggleAutoRotate() {
      isAutoRotating = !isAutoRotating;
      
      if (isAutoRotating) {
        rotateButton.innerHTML = '<i class="fa fa-pause"></i>';
        rotateButton.title = '暂停旋转';
      } else {
        rotateButton.innerHTML = '<i class="fa fa-repeat"></i>';
        rotateButton.title = '自动旋转';
      }
    }
    
    // 重置视图
    function resetView() {
      camera.position.set(0, 2, 5);
      controls.reset();
      isAutoRotating = false;
      rotateButton.innerHTML = '<i class="fa fa-repeat"></i>';
      rotateButton.title = '自动旋转';
      
      // 切换到客厅
      roomButtons.forEach(btn => btn.classList.remove('active'));
      roomButtons[0].classList.add('active');
    }
    
    // 切换房间
    function switchToRoom(roomId) {
      // 更新激活状态
      roomButtons.forEach(btn => btn.classList.remove('active'));
      Array.from(roomButtons).find(btn => btn.getAttribute('data-room') === roomId).classList.add('active');
      
      // 根据房间类型设置相机位置和旋转
      switch (roomId) {
        case 'livingroom':
          camera.position.set(0, 2, -2);
          camera.lookAt(0, 1, 0);
          break;
        case 'masterbedroom':
          camera.position.set(-3, 2, 2);
          camera.lookAt(-3, 1, 0);
          break;
        case 'secondbedroom':
          camera.position.set(-4, 2, -2);
          camera.lookAt(-4, 1, -4);
          break;
        case 'kitchen':
          camera.position.set(3, 2, 2);
          camera.lookAt(2, 1, 2);
          break;
        case 'bathroom':
          camera.position.set(2, 2, -1);
          camera.lookAt(2, 1, -3);
          break;
      }
    }
    
    // 全屏查看
    function toggleFullscreen() {
      if (!document.fullscreenElement) {
        modelContainer.requestFullscreen().catch(err => {
          console.log(`全屏错误: ${err.message}`);
        });
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
    }
  </script>
</body>
</html>
